<template>
  <div class="app-container">
    <div class="collect-template">
      <table-mix
        :opts="opts"
        @refresh="refresh"
      />
    </div>
  </div>

  <EquipmentVarDialog
    ref="drawIns"
    @refresh="refresh"
  />
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { VarItem, apiDellVar, apiGetVarList } from "@/api/var";
import EquipmentVarDialog from "./components/EquipmentVarDialog.vue";
import {
  type TableComboQueryParams,
  TableMix,
  type TableMixOpts,
} from "@likcheung/work-components";
import useEquipmentVarColumns from "./template/EquipmentVarColumns";

// 路由获取id
const {
  query: { id },
} = useRoute();

const drawIns = ref<InstanceType<typeof EquipmentVarDialog>>();
// 编辑操作
const onEdit = (row: VarItem) => {
  if (!row.id) return;
  drawIns.value?.init({ id: row.id });
};
// 删除操作
const onDelete = async (row: VarItem) => {
  await ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  if (!row.id) return;
  const res = await apiDellVar({ idList: [row.id] });
  ElMessage.success(res.msg);
  refresh();
};

// 表格配置
const opts = reactive<TableMixOpts<VarItem>>({
  data: [],
  columns: useEquipmentVarColumns({ onEdit, onDelete }),
  total: 0,
});

const refresh = async (query?: TableComboQueryParams) => {
  const p = {
    templeId: id as string,
    pageNum: query?.pageIndex || 1,
    pageSize: query?.pageSize || 10,
  };
  const res = await apiGetVarList(p);
  opts.data = res.data.records;
  opts.total = res.data.total;
};
</script>

<style scoped>
.app-container {
  flex: 1;
}
</style>
